<!--{__NOLAYOUT__}-->
{include file="../application/admin/view/template/header.html" /}
<body>
<div class="layui-btn-group" style="margin-top: 5px; width: 100%;">
    <button style="float: right" class="layui-btn" onclick="addUser()" data-type="getCheckData">添加用户</button>
</div>
<table class="layui-hide" id="table" lay-filter="table-filter"></table>
</body>
<script type="text/html" id="header-image-tpl">
    <!-- 头像模板 -->

    <img src="/uploads/admin/avatar/{{d.head_photo}}" class="layui-nav-img">

</script>

<script type="text/html" id="auth-title">
    <!-- 用户组模板 -->

    {{#
    layui.each(d.user_group, function(index, item){ }}
     <span style="padding: 3px; color: white; background-color: #5FB878">{{item.groups.title}}</span>
    {{#  }); }}


</script>

<script type="text/html" id="status-switch">
    <!-- 是否禁用按钮开关模板 -->
    <input type="checkbox" name="is_lock" value="{{d.user_id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="is_status" {{ d.status == 1 ? 'checked' : '' }}>
</script>


<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="auth">权限</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



<script src="__STATIC__/style/js/common.js"></script>

<script>

    layui.use(['table','form','layer'], function () {
        var table = layui.table
            , form= layui.form
            , layer = layui.layer;
       var tableIns = table.render({
            elem: '#table'
            , url: '/admin/user/index/'//请求地址
            , where: {field: 'user_id', order: 'asc'}
            , method: 'POST'//请求方式
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度
            , limit: 30//请求数据条数
            , height: 'full-65'//高度
            , loading: true//显示加载提示
            , page: true //开启分页
            , cols: [[
                {field: 'user_id', title: '用户ID', align: 'center', sort: true},
                {field: 'user_name', title: '用户名', align: 'center'},
                {field: 'nick_name', title: '用户昵称', align: 'center'},
                {field: "user_group", title: '用户组', align: 'center',templet:'#auth-title'},
                {field: 'head_photo', title: '用户头像', align: 'center',templet:'#header-image-tpl'},
                {field: 'create_time', title: '创建时间', align: 'center'}, //创建时间和修改时间没必要展示
                {field: 'status', title: '用户状态', align: 'center',templet:'#status-switch'},
                {fixed: 'right', title: '操作', align: 'center',toolbar:'#toolbar'}
            ]]
            , limits: $.common.tableLimits()

        });
        //监听排序
        table.on('sort(table-filter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('table', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });
        });
        //监听是否禁用开关
        form.on('switch(is_status)', function(obj){
            var data = {user_id: this.value, is_status: obj.elem.checked ? 1 : 0};

            $.post("/admin/user/changeStatus", data, function (result) {
                layer.msg(result.msg);
            });





        });
        //监听工具条
        table.on('tools(table-filter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2,
                    title: '编辑用户',
                    shadeClose: true,
                    shade: 0.6,
                    area: ['600px', '700px'],
                    maxmin:true,
                    content: '/admin/user/profile/uid/'+data.user_id
                });
            } else if(layEvent === 'del'){ //删除

                if (data.user_id == 1) {
                    layer.alert('管理员账户不能被删除',{icon: 4});
                    return false;
                }

                layer.confirm('真的删除此用户吗？',{icon: 3, title:'提示'}, function(index){

                    //向服务端发送删除指令
                    $.post("/admin/user/delUser", {user_id:data.user_id}, function (result) {
                        layer.msg(result.msg);
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                    });
                });

            } else if(layEvent === 'auth'){ //编辑

                if (data.user_id==1) {
                    layer.alert('管理员账户不能被修改',{icon: 4});
                    return false;
                }

                layer.open({
                    type: 2,
                    title: '权限编辑',
                    shadeClose: true,
                    shade: 0.6,
                    area: ['600px', '700px'],
                    maxmin:true,
                    content: '/admin/user/auth/uid/'+data.user_id,
                    cancel:function () {
                        reloadTable();
                    }
                });

            }
        });

    });




function addUser() {
    layer.open({
        type: 2,
        title: '添加用户',
        shadeClose: true,
        shade: 0.6,
        area: ['600px', '700px'],
        maxmin:true,
        content: '/admin/user/addUser'
    });
}




    function reloadTable() {
        layui.table.reload('table');
    }





</script>